<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <!-- jquery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <!-- layer -->
    <script type="text/javascript" src="/layer/layer.js"></script>
    <!-- common.js -->
    <script type="text/javascript" src="/js/common.js"></script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
        <span id="userTip"> 您还没有登录，请登陆后再操作<br/></span>
        <span>没有收货地址的提示。。。</span>
    </div>
    <table class="table" id="goods">
        <tr>
            <td>商品名称</td>
            <td colspan="3" id="goodsName"></td>
        </tr>
        <tr>
            <td>商品图片</td>
                <td colspan="3"><img id="goodImg" width="200" height="200"/></td>
            </tr>
        <tr>
            <td>秒杀开始时间</td>

           <td id="startTime"></td>

            <td >

                <input type="hidden" id="remainSeconds"   >
<!--                <span if="${seckillStatus eq 0}" > 秒杀倒计时:-->
<!--                   <span text="${remainSecond}" id="countdown"> </span> 秒-->
<!--                </span>-->
<!--                <span if="${seckillStatus eq 1}">秒杀进行中</span>-->
<!--                <span if="${seckillStatus eq 2}">秒杀结束</span>    -->
                <span id="seckillTip"></span>

            </td>
            <td>
<!--                <form action="/seckill/doSeckill" method="post" id="seckillForm">-->

<!--                    <input type="hidden" id="goodsId" name="goodsId">-->
<!--                    <button type="submit" class="btn btn-primary btn-block" id="buyButton">-->
<!--                    立即秒杀-->
<!--                    </button>-->
<!--                </form>-->


             <div >
                 <div style="display: flex" >
                     <img id="captchaImg" width="130" height="32"  onclick="refreshCaptcha()" style="display: none">
                     <input id="captcha" class="form-control" style="display: none;width: 110px " >
                     <button type="submit"  class="btn btn-primary " id="buyButton" onclick="getSeckillPath()">立即秒杀
                         <input type="hidden" name="goodsId" id="goodsId">
                     </button>
                 </div>
             </div>
            </td>
        </tr>

        <tr>
            <td>商品原价</td>
            <td colspan="3"  id="goodsPrice"></td>
        </tr>
        <tr>
            <td>秒杀价</td>
            <td colspan="3" id="seckillPrice"></td>
        </tr>

        <tr>
            <td>库存数量</td>
            <td colspan="3" id="stockCount"></td>
        </tr>
    </table>
</div>
</body>

</script>
<script>
    $(function () {
       // countDown();
        getDetails();
    });
    function refreshCaptcha(){
        $("#captchaImg").attr("src","/seckill/captcha?goodsId="+$("#goodsId").val()+"&time="+new Date());
        $("#captchaImg1").attr("src","/seckill/captcha?goodsId="+$("#goodsId").val()+"&time="+new Date());
    }
    function getSeckillPath(){
        var captcha=$("#captcha").val();
        var goodId= $("#goodsId").val();
        console.log(111111111)
        console.log(goodId)
        g_showLoading();
        $.ajax({
            url:"/seckill/path",
            type:"GET",
            data:{
                goodsId:goodId,
                captcha:captcha
            },
            success:function (data){
                if(data.code==200){
                    var path=data.obj;
                    doSeckill(path);
                }else{
                    layer.msg(data.message);
                }
            },
            error:function (){
                layer.msg("客户端请求错误");
            }

        })
    }
    function doSeckill(path){
        $.ajax({
            url:'/seckill/' +path +'/doSeckill',
            type:'POST',
            data:{
                goodsId:$("#goodsId").val()

            },
            success:function(data){

                if(data.code==200){

                    getResult($("#goodsId").val())
                    //window.location.href="/orderDetail.htm?orderId="+data.obj.id;
                }else{
                    layer.msg(data.message)
                }
            },
            error:function(){
                layer.msg("客户端请求错误")
            }

        })
    }
    function getResult(goodsId){
        g_showLoading();
        $.ajax({
            url:"/seckill/result",
            type:"GET",
            data:{
                goodsId:goodsId,
            },
            success:function (data){
                if(data.code==200){
                    var result=data.obj;
                    if(result<0){
                        layer.msg("对不起，秒杀失败");
                    }else if(result==0){
                        setTimeout(function (){
                            getResult(goodsId);
                        },50);
                    }else{
                        layer.confirm("恭喜你，秒杀成功!查看订单？",{btn:["确定","取消"]},
                        function (){
                            window.location.href="/orderDetail.htm?orderId="+result;
                        },
                        function (){
                            layer.close();
                        })
                    }
                }
            },
            error:function (){
                layer.msg("客户请求错误");
            }
        })
    }

    function getDetails(){
        var  goodsId = g_getQueryString("goodsId");
        $.ajax({
            url:'/goods/toDetail1/'+goodsId,
            type:'GET',
            success:function(data){
                if(data.code==200){
                    console.log(data.obj);
                    render(data.obj);
                    countDown();
                }else{
                    layer.msg("客户端请求出错");
                }
            },
            error:function(data){
                layer.msg("客户端请求出错");
            }

        })

    }

    function render(detail){
           var user= detail.user;
           var goods=detail.goodsVo;
           var remainSeconds=detail.remainSeconds;
           if(user){
               $("#userTip").hide();
           }
           $("#goodsName").text(goods.goodsName);
           $("#goodsImg").attr("src",goods.goodImg);
           $("#startTime").text(new Date(goods.startDate).format("yyyy-MM-dd HH:mm:ss"));
           $("#remainSeconds").val(remainSeconds);
           //.val给输入框赋值
           $("#goodsId").val(goods.id);
           $("#goodsPrice").text(goods.goodsPrice);
           $("#seckillPrice").text(goods.seckillPrice)
           $("#stockCount").text(goods.stockCount);

    }


    function countDown() {
            var remainSeconds=$("#remainSeconds").val();
            var timeout;
            //秒杀未开始
            if(remainSeconds>0){
                $("#buyButton").attr("disabled",true)
                $("#seckillTip").html("秒杀倒计时：" + remainSeconds + "秒");
                timeout=setTimeout(function (){
                  //  $("#countdown").text(remainSeconds-1);
                    $("#remainSeconds").val(remainSeconds-1);
                    countDown();
                },1000)
                //秒杀进行中
            }else if(remainSeconds==0){

                $("#buyButton").attr("disabled",false)
                if(timeout){
                    clearTimeout(timeout)
                }
                $("#seckillTip").html("秒杀进行中")
                $("#captchaImg").attr("src","/seckill/captcha?goodsId="+$("#goodsId").val()+"&time="+new Date());
                $("#captcha").show();
                $("#captchaImg").show();

                //秒杀已结束
            }else{
                $("#buyButton").attr("disabled",true)
                $("#seckillTip").html("秒杀已结束")
                $("#captcha").hide();
                $("#captchaImg").hide();
            }

    };



</script>
</html>